import React, { Component } from 'react'
import {connect} from 'react-redux'

interface Iprops{
    id:number,
    img:string
    name:string,
    energy:string,
    frequency:string,
    changeHobit:(t_id:number,id:number,frequency:string) =>void,
    t_id:number
}

let hobit = ['常吃','偶尔','不吃'];

interface Istate{
    isShow:boolean
}

class Food_item extends Component<Iprops,Istate> {
    state = {
        isShow:false
    }
    render() {
        let {img,name,frequency,id,t_id} = this.props;
        let {isShow} = this.state;
        return (
            <div>
                <dl>
                    <dt className="img">
                        <img src={img} alt=""/>
                    </dt>
                    <dd>
                        {name}
                    </dd>
                </dl>
                <div>
                    <div style={{display:isShow?'block':'none'}}>
                        {hobit.map(item => <span onClick={() => {
                            this.props.changeHobit(t_id,id,item);
                            this.setState({
                                isShow:false
                            })
                        }} key={item}>{item}</span>)}
                    </div>
                    <span onClick={() => {
                        this.setState({
                            isShow:true
                        })
                    }}>*{frequency}</span>
                </div>
            </div>
        )
    }
}

let statrMapToProps = (state:any) => {
    return {}
}

let dispacthMapToProps = (dispatch:any) => {
    return {
        changeHobit(t_id:number,id:number,frequency:string){
            dispatch({type:'CHANGE_HOBIT',t_id,id,frequency})
        }
    }
}

export default connect(statrMapToProps,dispacthMapToProps)(Food_item)